<template>
  <!--资料-->
  <div class="ziliao">
      <Tabs >
        <TabPane label="我的考试" key="key1">
           <ul class="orderOut">
             <li>
               <p class="title">项目经理证书考试</p>
                2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
                <a href="javascript:;" class="status">已缴费</a>
                <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
             </li>
             <li>
               <p class="title">2020年美国大学研学考察活动申报</p>
                2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
                <a href="javascript:;" class="status no">立即缴费</a>
                <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
             </li>
             <li>
               <p class="title">项目经理证书考试</p>
                2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
                <a href="javascript:;" class="status">已缴费</a>
                <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
             </li>

           </ul>


        </TabPane>
        <TabPane label="未缴费">
          <ul class="orderOut">
            <li>
              <p class="title">项目经理证书考试</p>
               2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
               <a href="javascript:;" class="status no">立即缴费</a>
               <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
            </li>
            <li>
              <p class="title">2020年美国大学研学考察活动申报</p>
               2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
               <a href="javascript:;" class="status no">立即缴费</a>
               <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
            </li>
            <li>
              <p class="title">项目经理证书考试</p>
               2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
               <a href="javascript:;" class="status no">立即缴费</a>
               <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
            </li>

          </ul>
        </TabPane>
        <TabPane label="已缴费">
          <ul class="orderOut">
            <li>
              <p class="title">项目经理证书考试</p>
               2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
               <a href="javascript:;" class="status ">已缴费</a>
               <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
            </li>
            <li>
              <p class="title">2020年美国大学研学考察活动申报</p>
               2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
               <a href="javascript:;" class="status ">已缴费</a>
               <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
            </li>
            <li>
              <p class="title">项目经理证书考试</p>
               2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
               <a href="javascript:;" class="status ">已缴费</a>
               <router-link to="/ziliao/mykaoshi" class="detail">查看考试详情 ></router-link>
            </li>

          </ul>
        </TabPane>
        <Tab-pane label="已结束" key="key3" class="changephone">
         <ul class="orderOut">
           <li>
             <p class="title">项目经理证书考试</p>
              2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
              <a href="javascript:;" class="status ">考试结束</a>
              <span>考试成绩 90分</span>
           </li>
           <li>
             <p class="title">2020年美国大学研学考察活动申报</p>
              2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
              <a href="javascript:;" class="status ">考试结束</a>
              <span>考试成绩 90分</span>
           </li>
           <li>
             <p class="title">项目经理证书考试</p>
              2020-02-10  09:36 <br>活动时间：2020-04-10 <br> 申报时间：2020-01-01
              <a href="javascript:;" class="status ">考试结束</a>
              <span>考试成绩 90分</span>
           </li>

         </ul>
        </Tab-pane>
      </Tabs>
    <router-view ></router-view>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">

 .orderOut li {
    border-bottom: 1px solid #E1E1E1;
    padding: 20px 0;
    position: relative;
    font-size: 14px;
    color: #666;
    .title{
      font-size: 16px;
      color: #000;
      margin-bottom: 10px;
    }
    .status{
      color: #fff ;
      font-size: 16px;
      background-color: #ccc;
      position: absolute;
      top:20px;
      right: 0;
      display: block;
      width: 120px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      border-radius: 5px;
      &.no{
        background-color: #66CC99;
      }
    }
    .detail,span{
      color: #666;
      font-size: 14px;
      position: absolute;
      bottom:22px;
      right: 0;
    }
    span{
      color: #77614D;
    }

  }

</style>
<script type="text/ecmascript-6">

    export default {
        name: '',
        props: {},
        data() {

            return {

            }
        },
        methods: {

        },
        created() {

        },
      mounted(){

      },

    }
</script>
